<template>
  <div class="container">
    <blank
      :value="true"
      :title="data.title"
      :message="data.message"
      :icon="data.icon"
      v-if="data"
    />
    <div
      v-if="data.qrcode"
      class="fixedbutton"
    >
      <van-button
        color="linear-gradient(to right, #fdcb62, #ff8338)"
        tag="a"
        round
        :href="data.qrcode"
      >保存到本地</van-button>
    </div>
  </div>
</template>

<script>
import Blank from '../../components/abnor/blank'
import {
  Row,
  Col,
  Icon,
  Circle,
  Button,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Image,
  Lazyload
} from 'vant'

export default {
  components: {
    Blank,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Circle.name]: Circle,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Image.name]: Image,
    Lazyload
  },

  data () {
    return {
      data: {
        title: '暂未生成专属二维码',
        button: null,
        icon: '/static/icons/blank_qrcode.png'
      }
    }
  },

  created () {
    this.onLoad()
  },

  watch: {
    data () {
      if (this.data.qrcode) {
        this.showEmpty = false
      } else {
        this.showEmpty = true
      }
    }
  },

  methods: {
    redirect (name, id) {
      this.$router.push({ name: name, params: { id: id } })
    },
    formatPrice (price) {
      return (price / 100).toFixed(2)
    },
    onLoad () {
      this.axios
        .get('/commission/qrcode')
        .then(response => {
          this.data = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.commission-header {
  background: #3a95fe;
}
.container {
  height: 100vh;
}
.fixedbutton {
  position: fixed;
  left: 0;
  bottom: 30px;
  text-align: center;
  padding: 20px;
  width: 100%;
}
</style>
